<template>
	<div class="main">

		<nav class="nav">
			<ul class="nav-ul">
				<li v-if='hasLogin'>
					<a href="javascript:void(0)" id="id" :class="getCategoryClass({code:0,id:0,name:'热门'})"
							@click="onCategoryClick({code:0,id:0,name:'推荐'})">推荐</a>
				</li>
				<li v-for="(item,index) in categoryList1" :key="index">
					<a href="javascript:void(0)" :id="item.id" :code='item.code' :class="getCategoryClass(item)"
							@click="onCategoryClick(item)">{{item.name}}</a>
					<!--<router-link :to="item.path" exact>{{item.title}}</router-link>-->
				</li>
			</ul>
		</nav>

		<main class="center">
			<div class='data-box'>
				<swiper :options="swiperOption" ref="mySwiper">
					<!-- slides -->
					<swiper-slide v-for="item in data" :key="item.newsId">
						<img width="100%" height="100%" :src="item.imageUrls" :onerror='errorImg' alt="">
					</swiper-slide>
					<!-- Optional controls -->
					<div class="swiper-pagination" slot="pagination"></div>
					<div class="swiper-button-prev" slot="button-prev"></div>
					<div class="swiper-button-next" slot="button-next"></div>
					<!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
				</swiper>
				<!-- 轮播组件结束 -->
				<div class="zj1" v-for="(item,index) in rmData" :key="index" >
					<div class="news-img"><img :src="item.imageUrls" :onerror="errorImg"></div>
					<div class="zj1-li">
						<span @click="sendDetail(item)" class="md">{{item.title}}</span>
						<div class="zj1-sj">
							{{item.createTime}} <font style="padding-left:30px;">{{item.author}}</font>
							<span><img src="../../assets/image/mo.png" style="height:10px;vertical-align:middle">&nbsp; <span style="vertical-align:middle;margin-top: 1px; font-size: 14px; color: #888;">{{item.queryCount}}</span></span>
						</div>
					</div>
				</div>
			</div>

			<!-- 2 -->
			<!--<div class="zj2">
				<span class="md" @click="sendDtail(item)">{{item.title}}</span>
				<ul class="sp">
					<li>
						<img src="/static/img/pg1.24f7fb7.png">
					</li>
					<li class="img-left">
						<img src="/static/img/pg1.24f7fb7.png">
					</li>
					<li class="img-left">
						<img src="/static/img/pg1.24f7fb7.png">
					</li>
					<li class="img-left">
						<img src="/static/img/pg1.24f7fb7.png">
					</li>
				</ul>
				<ul class="sp1">
					<li>2018-06-20 <font style="padding-left:30px;">{{item.author}}</font></li>
					<li style="margin-left:300px;">
						<img src="../../assets/image/mo.png">&nbsp;{{item.queryCount}}
					</li>
				</ul>
			</div>-->
		</main>

		<div class="right">
			<section class="ace">
				<input type="text" class="ace_npt" v-model="keyword">
				<div class="seo" @click="loadData">搜索</div>
			</section>

			<!-- 登录界面 -->
			<div class="login">
				<my-login :hasLogin="hasLogin" v-on:catchLoginStus="getLoginStus($event)" />
			</div>

			<!-- 热榜 -->
			<section class="cc">
				<h2 class="h2">
					<mark></mark>
					热榜
				</h2>
				<ul class="hot_ul">
					<!-- <li v-for="count in hotNum" @click="loadHotData(1,count)"  class="active" ></li> -->
					<!-- <li class="active" ></li> -->
				</ul>
				<div class="hot_content">

					<template v-for="(item,index) in hotData" >
						<div class="hot_flex" >
							<div class="hot-pic">
								<img width="100%" height="100%" src="../../assets/image/face.png" alt="">
							</div>
							<div class="hot-name">
								<p class="name">{{item.author}}</p>
								<em>{{item.createTime}}</em>
							</div>
							<!-- <div class="hot-btn" @click="addFllow(index)"></div> -->
						</div>
						<p class="hot-text" @click="sendDetail(item)">{{item.title}}</p>
						<div style="text-align:center;margin-left:72px">
							<img class="hot-image" :src="item.imageUrls" :onerror='errorImg' alt="" >
						</div>
						<div class="line"></div>
					</template>
				</div>
			</section>

		</div>
	</div>
</template>
<script>
	import Service from "@/service/service";
	import MyLogin from "../../login/login";

	export default {
		data() {
			return {
				swiperOption: {
					//swiper3
					autoplay: 3000,
					speed: 1000,
					loop: true,
					grabCursor:true,
					autoplayDisableOnInteraction: false,
					prevButton: ".swiper-button-prev",
					nextButton: ".swiper-button-next",
					paginationClickable: true,
					pagination: ".swiper-pagination"
				},
				data: [],
				rmData:[],
				hotData:[],
				recommendData: [],
				sideData: [],
				keyword: '',
				keywordList: [],
				chooseCategory: 0,
				categoryList1:[],
				newsSearchTxt:'',
				positionName:'',
				slideEmpty: false,
        rmEmpty: false,
        hotNum:0,
				userId:sessionStorage.getItem("userId")||0,
        loginInfo:'',
        hasLogin: false,
        hotCurrent:1,
				errorImg:'this.src="' + require('../../assets/image/pg1.png') + '"'
			};
    },
    watch: {
      "$route":{
        handler: function(val, oldVal){
          const id = this.chooseCategory;
          if(this.hasLogin == true){
			      this.loadRmData(id);
          }else{

			      this.loadRmData(id+1);
          }

        },
        // 深度观察监听
        deep: true
      }
    },
	created() {
		this.getTypeList();
		// 加载搜索关键字
    // this.loadKeywords();

    //查询首页资讯
    this.loadData(1);
    // 加载广告位数据
    this.loadHotData(1,1);

    if(this.userId!= null && this.userId!='' && userId != 0){
      this.hasLogin = true;
      // 加载推荐数据
      this.loadRmData(0);
    }else{
      // 加载推荐数据
      this.loadRmData(1);

    }
	},
		methods: {
			getLoginStus(msg){
				this.hasLogin = msg
			},
			getTypeList () {
				// 获取左边导航栏数据

				const {simpleAjax, formatTime} = this.Services;

				simpleAjax({
					url: "/position/typelist",
					method: "post",
					data: {}
				}).then((response) => {
					let code = response.data.resultCode;
					let data = response.data.data.list;
					this.categoryList1 = data
				});

			},
			// 查询首页轮播资讯
			loadData(pid) {

				const {simpleAjax, formatTime} = this.Services;
				const _this = this;
				 let data = {
					param: {
						positionType: '',
						pageSize: 20,
						pageNo: 1,
						orderBy:'',
						keyword: '',
						positionName: '',
						slide:'yes'
					},
					userId:this.userId
				};
				Service.myAjax(
					{
					method: "post",
					url: Service.baseUrl + "/news/search",
					data: data
					},
					function(response) {
						const {data} = response.data;
						if(data.list.length>0){
							_this.slideEmpty = false
							_this.data = data.list.map((item) => {
								item.createTime = formatTime(item.createTime);
								return item;
							})
						}else{
							_this.slideEmpty = true
						}
					},
					function(error) {
						_this.slideEmpty = true
					}
				);

			},
			// 查询首页推荐资讯
			loadRmData(pid) {
				// debugger
				const {simpleAjax, formatTime} = this.Services;
				const _this = this;
        let data ={};
				if(pid == 0){
					// 热门
				 	data = {
						param: {
							positionType: pid,
							pageSize: 20,
							pageNo: 1,
							orderBy:'',
							keyword: this.keyword,
							positionName: this.positionName,
							recommend:"yes"
						},
						userId:this.userId
					};
				}else{
				 	data = {
						param: {
							positionType: pid,
							pageSize: 20,
							pageNo: 1,
							orderBy:'',
							keyword: this.keyword,
							positionName: this.positionName
						},
						userId:this.userId
					};
				}
				Service.myAjax(
					{
					method: "post",
					url: Service.baseUrl + "/news/search",
					data: data
					},
					function(response) {
						const {data} = response.data;
						if(data.list.length>0){
							_this.rmData = data.list.map((item) => {
								item.createTime = formatTime(item.createTime);
								return item;
							})
						}
					},
					function(error) {
					}
				);
			},

			// 查询首页热点资讯
			loadHotData(pid,count) {

				const {simpleAjax, formatTime} = this.Services;
        const _this = this;
        this.hotCurrent = count;
				let data = {
					param: {
						positionType: '',
						pageSize: 20,
						pageNo: count,
						orderBy:'',
						keyword: '',
						positionName: '',
						hot:"yes"
					},
					userId: this.userId
				};
				Service.myAjax(
					{
					method: "post",
					url: Service.baseUrl + "/news/search",
					data: data
					},
					function(response) {
            const {data} = response.data;
            const hots = Number(response.data.totalCount);

            _this.hotNum =  Math.ceil(hots/20);
						if(data.list.length>0){
							_this.hotData = data.list.map((item) => {
                item.createTime = formatTime(item.createTime);
                let imgList = item.imageUrls.split("|");
                item.imageUrls = imgList[0];  //热点默认显示第一张图

								return item;
							})
						}
					},
					function(error) {
					}
				);
			},
			// 加载关键词
			loadKeywords() {
				const {simpleAjax, formatTime} = this.Services;
				simpleAjax({
					url: "/news/hotKeyWord",
					method: "post",
					data: {
						type: 'news',
						orderBy: "count"
					}
				}).then((response) => {
					const {data} = response.data;
					this.keywordList = data.list;
					this.keyword = data.list[0];
				});


			},
			// 点击分类获取资讯详情
			onCategoryClick(item) {
				this.keyword = '';
				this.chooseCategory = item.id;
				this.positionName = item.name;
				this.loadRmData(item.id);
			},
			// 获取分类样式
			getCategoryClass(item) {
				const hasLogin = this.hasLogin;
				if(hasLogin){
				// 登录
					return this.chooseCategory === item.id ? ['current'] : [];
				}else{

					return this.chooseCategory === item.id-1 ? ['current'] : [];
				}
			},
			sendDetail(item) {
				// 跳转资讯详情
				this.$router.push({
					path: "/jobdetail",
					query: {
						id: item.id
					}
				});
      },
      addFllow (ind) {
        // 热点关注

				const _this = this;
        		let userId = sessionStorage.getItem("userId");
				let data = {
					param: {
            toUserId:''
					},
					userId: userId
				};
				Service.myAjax(
					{
					method: "post",
					url: Service.baseUrl + "/news/addFollow",
					data: data
					},
					function(response) {
            			const {data} = response.data;

					},
					function(error) {
						console.log(error)
					}
				);
      }

		},
		components: {
			MyLogin
		}
	};
</script>
<style lang="scss" scoped>
.swiper-container{
	height: 360px;
}
.swiper-button-prev, .swiper-button-next{
	display: none
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
	text-align: right;
	padding-right: 20px
}
	.main {
		// width: 1400px;
		width: 1260px;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
		color: #222;
		.nav {
			width: 220px;
			font-size: 16px;
			.nav-ul {
				li {
					height: 56px;
					line-height: 56px;
					// margin-left: 15px;
					text-align: center;
					font-weight: 800;
					white-space: nowrap;
					a {
						color: #222;
						display: inline-block;
						width: 100%;
						height: 100%;
					}
					.current {
						background: #fed226;
						color: #fff !important;
					}
					&:hover a {
						background: #fed226;
						color: #fff;
					}
				}
			}
		}
		.center {
			width: 700px;
			min-height: 300px;
			margin-left: 20px;

			.empty{
				padding: 100px 0;
				font-size: 18px;
				font-weight: 600;
				text-align: center
			}
		}
		.right {
			width: 300px;
			min-height: 300px;
			margin-left: 20px;
			.ace {
				height: 0.6rem;
				line-height: 0.6rem;
				// border:1px solid #adadad;
				display: flex;
				justify-content: space-between;
				background: url(../../assets/image/inputt.png);
				background-size: 100% 100%;
				.seo {
					width: 92px;
					height: 0.6rem;
					background: #fed226;
					text-align: center;
					font-size: 16px;
					color: #fff;
					margin-top: -1px;
					margin-right: -1px;
					cursor: pointer;
				}
				.ace_npt {
					background: transparent;
					width: 220px;
					padding-left: 63px;
				}
			}
			.login {
				// border-bottom: 2px solid #fed226;
				background: #f5f5f5;
				margin-top: 20px;
				.login-pic {
					text-align: center;
					img {
						border-radius: 50%;
						margin-top: 20px;
						width: 100px;
						height: 100px;
					}
				}
				.h1 {
					text-align: center;
					font-size: 22px;
					font-weight: 800;
					padding-top: 10px;
				}
				.btn-wrap {
					display: flex;
					justify-content: space-around;
					margin: 80px 0 50px 0;
					.btn {
						height: 40px;
						width: 80px;
						font-size: 18px;
						color: #fff;
						background: #3776f2;
						cursor: pointer;
					}
				}
			}
			.cc {
				position: relative;
				background: #f5f5f5;
				margin-top: 26px;
				padding-bottom: 30px;
				.h2 {
					padding-top: 20px;
					font-size: 22px;
					mark {
						display: inline-block;
						width: 4px;
						height: 26px;
						background: #fed226;
						vertical-align: top;
						margin-left: 30px;
					}
				}
				.hot_ul {
					position: absolute;
					right: 30px;
					top: 24px;
					display: flex;
					li {
						width: 10px;
						height: 10px;
						background: #fff;
						margin-left: 10px;
            cursor: pointer;
					}
					.active {
						background: #fed226;
					}
				}
				.hot_content {
					background: #fff;
					width: 300px;
					margin: 23px auto 0;
					font-size: 16px;

					.hot_flex:first-child{
						padding-top: 35px
					}
					.hot_flex {
						display: flex;
						// justify-content: space-between;

						.hot-pic {
							width: 60px;
							height: 60px;
							border-radius: 50%;
							margin: 4px 6px;
							// padding: 30px 0 0 50px;
						}
						.hot-name {
							margin-left: 10px;
							margin-top: 8px;

							.name {
								font-size: 18px;
								font-weight: bold;
								// padding: 34px 0 10px 0;
							}
							em{
								font-size: 12px;
								color: #666
							}
						}
						.hot-btn {
							width: 76px;
							height: 40px;
							margin-top: 6px;
							// margin-left: 44px;
							background: url(../../assets/image/attention.png);
						}
					}
					.hot-text {
						margin-left: 84px;
						margin-bottom: 8px;
            font-size: 14px;
            color: #888
					}
					.hot-text:hover {
						color: #d42525;
						cursor: pointer;
					}
					.hot-image {
            width: 100%;
            margin-bottom: 6px;
            border: 1px solid #e8e8e8;
					}
					.line {
						border: 0.5px solid #ccc;
						width: 100%;
						margin: 35px 0 30px 0;
					}
					.content {
						width: 300px;
						margin: 0 auto;
						.font {
							font-size: 18px;
							font-weight: 800;
							line-height: 27px;
						}
						.font:hover {
							color: #d42525;
							cursor: pointer;
						}
						.font2 {
							padding-top: 20px;
							line-height: 26px;
						}
					}
				}
			}
		}
	}

	.zj1 {
		border-top: 1px solid #ccc;
		display: inline-flex;
		align-items: flex-end;
		// margin-top: 30px;
		width: 100%;
		height: 150px;
		position: relative;

		.news-img{
			width: 180px;
			height: 100%;
			display: flex;
			padding: 20px 0;
			align-items: center;

			img{
				height:100%;
				width: 100%
			}
		}
		.zj1-li{
			height: 100%;
			width: 505px;
      margin-left: 15px;
      position: relative;
		}
		li {
			margin-top: 20px;
		}
	}

	.md {
		font-size: 18px;
		line-height: 30px;
		font-weight: bold;
		margin-top: 20px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.md:hover {
		color: #d42525;
		cursor: pointer;
	}

	.zj1-li li {
		margin-left: 20px;
	}

	.zj1-sj {
		font-size: 14px;
		color: #333;
		display: block;
		position: absolute;
		bottom: 16px;
		width: 100%;
	}

	.zj1-sj span {
		float: right;
	}

	.zj2 {
		border-top: 1px solid #ccc;
		margin-top: 25px;
		display: flex;
		flex-direction: column;
		span {
			display: flex;
			flex-direction: row;
			margin-top: 15px;
		}
	}

	.sp img {
		width: 187px;
	}

	.img-left {
		margin-left: 10px;
	}

	.sp1 {
		@extend .zj1-sj;
	}
</style>
